<template>
  
      <div class="header">
          <!-- 介绍区域 -->
          <div class=" headtitle clearfix">
              <div class="hellotext"><span>亲，欢迎来到企业共享服务平台（ESSP）！</span></div>
              <div class="helloright">
                <ul class="hellocon">
                    <li><a>个人中心</a></li>
                    <li><a>消息中心</a></li>
                    <li><a>客户服务</a></li>
                    <li><a>帮助中心</a></li>
                </ul>
                <div class="helloentry">
                    <span>登陆</span>
                    <span>|</span>
                    <span>注册</span>
                </div>
              </div>
          </div>
          <div class="headmain clearfix">
              <div class="logocon"><img src= "@/assets/logo.png" alt="logo" ></div>
              <div class="serchcon">
                  <input type="text" class="headserch">
                  <i class="serchbtn"></i>
              </div>
              <ul class="headul">
                    <li><a>ppt项目</a></li>
                    <li><a>投资融资</a></li>
                    <li><a>并购重组</a></li>
              </ul>
          </div>
          <div class="clearfix">
              <ul class="mainnav">
                  <li><a href="">园区大厅</a></li>
                  <li><a href="">园区概览</a></li>
                  <li><a href="">园区活动</a></li>
                  <li><a href="">惠政服务</a></li>
                  <li><a href="">园区资讯</a></li>
                  <li><a href="">园区管理</a></li>
                  <li><a href="">群组事务</a></li>
                  <li><a href="">走访记录</a></li>
              </ul>
              <div class="banner">
                  <img v-lazy='"https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1530163789015&di=4cb791f2be07644964b5bf6f705cb2a1&imgtype=0&src=http%3A%2F%2Fimg.zcool.cn%2Fcommunity%2F013ea058590d70a8012060c899bb48.jpg%402o.jpg"' alt="">
              </div>
          </div>
      </div>
</template>

<script>
export default {
  data () {
    return {
     
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
    .headtitle{
        height:36px;
        line-height: 36px;
    }
    .hellotext{
    float: left;
	font-size: 12px;
	color: #666666;
    }
    .helloright{
        float: right;
    }
    .hellocon{
        float: left;
        li {
            float: left;
        }
        li a{
            float: left;
            margin-right:55px;
            font-family: SimSun;
            color: #666666;
            &:hover{
                color:#932

            }
        }
    }
    .helloentry{
        float: left;
        span { 
            width: 65px;
            margin-right: 10px;
            font-family: SimSun;
            color: #666666;
            &:hover{
                color:#932

            }
        }
    }
    .headmain{
        padding:20px;
        background: #FFF;
    }
    .logocon{
        float: left;
        width: 202px;
        height: 57px;
        img{
            display: block;
            width:100%;
            height:100%;
        }
    }
    .serchcon{
        float: left;
        .headserch{
            float: left;
            width: 420px;
            height:36px;
            border: solid 2px #0066b3
        }
        .serchbtn{
            float: left;
            width: 45px;
            height: 40px;
            background-color: #0066b3;
        }
    }
    .headul{
        float: right;
        li {
            float: left;
        }
        li a{
            float: left;
            margin-left: 33px;
            font-family: SimHei;
            font-size: 14px;
            line-height: 40px;
            text-align: center;
            color: #333333;
            &:hover{
                color:#932
            }
        }
    }
    .mainnav{
        height: 40px;
	    background-color: #0066b3;
    }
    .mainnav li {
        float: left;
        a{  display: block;
            padding: 0px 20px;
            font-family: SimHei;
            font-size: 16px;
            line-height: 40px;
            font-weight: normal;
            font-stretch: normal;
            color: #ffffff;
            &:hover{
                background-color: #005595;
            }
        }
    }
    .banner{
        height:450px;
        img{
            display: block;
            width:100%;
            height:100%;
        }
    }


</style>
